<template>
	<view class="container p20">

		<view class="cu-list menu" v-if="list.length >0">
			<block v-for="(item, index) in list" :key="index">
				<view class="cu-item flex justify-between">
					<view class="flex-sub">【{{item.type == 1 ? '支出' : "收入"}}】{{item.name}}</view>
					<view>
						<u-button type="error" :plain="true" size="mini" text="删除" @tap="del(item.id)"></u-button>
					</view>

				</view>
			</block>
		</view>

		<u-empty v-else text="你还没有添加记账类型" icon="list"></u-empty>

		<view class="btn-theme bg-theme add-btn" @tap="showMask = true">添加新类型</view>

		<u-popup :show="showMask" @close="showMask = false" mode="center">


			<view class="mask">
				<view class="inner-container" @tap.stop="showMask = true">
					<view class="title p20 text-center">添加记帐类型</view>
					<view class="info p20">
						<u--form labelPosition="left">
							<u-form-item label="类型">
								<u-radio-group placement="row" v-model="typeIndex">
									<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in typeList"
										:key="index" :label="item.name" :name="item.value" @change="select_type">
									</u-radio>
								</u-radio-group>
							</u-form-item>

							<u-form-item label="名称">
								<u--input v-model="name" placeholder="请输入类型名称"></u--input>
							</u-form-item>
						</u--form>
					</view>
					<button class="bg-theme mt20" :disabled="disabled" @tap.stop="submit()">提交</button>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	let that;
	import FundTypeModel from '@/models/FundsTypeModel.js'
	export default {
		data() {
			return {
				loadStatus: false,
				list: [],
				typeList: [
					{
						name: '支出',
						value: 0
					},
					{
						name: '收入',
						value: 1,
					}
				],
				typeIndex: 0,
				name: '',
				disabled: false,
				showMask: false
			}
		},
		async onLoad() {
			that = this;
			uni.showLoading();
			await that.get_list()
			that.loadStatus = true;
			uni.hideLoading();

		},
		methods: {
			async get_list() {
				const res = await FundTypeModel.index()
				if (res.code == 200) {
					that.list = res.data;
				}
			},
			select_type(index) {
				that.typeIndex = index;
			},
			submit() {
				if (!that.name) {
					that.$base.alert('请输入类型名称');
					return;
				}

				that.disabled = true;
				uni.showLoading({
					mask: true
				})

				FundTypeModel.add({
					type: that.typeList[that.typeIndex]['value'],
					name: that.name
				}).then(res => {
					uni.hideLoading();
					that.disabled = false;
					that.$base.msg(res.msg)
					if (res.code == 200) {
						this.$base.init()
						that.showMask = false;
						that.name = '';
						that.get_list();
					}
				})
			},
			del(id) {
				uni.showModal({
					title: '提示',
					content: '确认删除该类型吗？',
					success(e) {
						if (e.confirm) {
							FundTypeModel.del(id).then(res => {
								that.$base.msg(res.msg)
								if (res.code == 200) {
									that.get_list();
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.container {
		padding-bottom: 120rpx;
		.cu-item {
			border-bottom: 1rpx solid #eee;
			padding: 20rpx;
		}

		.mask {
			z-index: 999;

			.inner-container {
				background: #FFFFFF;
				width: 500upx;
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);
				
				.title{
					padding: 20rpx;
					border-bottom: 1rpx solid #eee;
				}

				input {
					height: 60upx;
					padding: 0 20upx;
				}
				
				.info{
					padding: 20rpx 40rpx;
				}

				.bg-theme{
					border-radius: 0;
					color: #fff;
				}
			}
		}

		button.no-border {
			border-radius: 0;
		}
		
		.add-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%
		}
		
		.btn-theme{
			border-radius: 0;
		}
	}
</style>